<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户注册</title>
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap-icons/font/bootstrap-icons.css"
    />
    <style>
      .container-fluid {
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to top, #7f7fd5, #86a8e7, #91eae4);
        background-size: cover;
      }
      .register-container {
        width: 350px;
        padding: 20px 30px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.5);
      }

      .register-title {
        text-align: center;
        margin-bottom: 16px;
        color: #333;
      }

      .form-control:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
      }

      .btn-register {
        width: 100%;
        padding: 10px;
      }

      .password-strength {
        height: 5px;
        margin-top: 5px;
        background-color: #e9ecef;
        border-radius: 3px;
        overflow: hidden;
      }

      .password-strength-bar {
        height: 100%;
        width: 0%;
        transition: width 0.3s ease;
      }

      .form-text a {
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <div class="container-fluid">
      <div class="register-container">
        <h2 class="register-title">Register</h2>
        <form id="register-form">
          <div class="mb-3">
            <label for="role" class="form-label">Role:</label>
            <select class="form-select" id="role"></select>
          </div>
          <div class="mb-3">
            <label for="firstname" class="form-label">Firstname:</label>
            <input
              type="text"
              class="form-control"
              id="firstname"
              name="firstname"
              value="Noah"
            />
          </div>
          <div class="mb-3">
            <label for="lastname" class="form-label">Lastname:</label>
            <input
              type="text"
              class="form-control"
              id="lastname"
              name="lastname"
              value="Carter"
            />
          </div>
          <div class="mb-3">
            <label for="age" class="form-label">Age:</label>
            <input
              type="number"
              class="form-control"
              id="age"
              name="age"
              value="18"
            />
          </div>
          <div class="mb-3">
            <label for="username" class="form-label">Username:</label>
            <input
              type="text"
              class="form-control"
              id="username"
              name="username"
            />
            <div class="form-text">4-16 letters, numbers, or underscores</div>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password:</label>
            <input
              type="password"
              class="form-control"
              id="password"
              name="password"
              value="123456"
            />
            <div class="form-text">At least 6 characters</div>
          </div>
          <div class="mb-3">
            <label for="confirmPassword" class="form-label"
              >ConfirmPassword:</label
            >
            <input
              type="password"
              class="form-control"
              id="confirmPassword"
              name="confirmPassword"
              value="123456"
            />
          </div>
          <button type="submit" class="btn btn-primary btn-register">
            Register
          </button>
        </form>
        <div class="text-center mt-3">
          <span>Already have an account?</span>
          <a href="login.html"> Go Login</a>
        </div>

        <div id="message" class="alert alert-danger mt-3 d-none"></div>
      </div>
    </div>

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>

    <script src="./utils/request.js"></script>
    <script src="./utils/store.js"></script>
    <script src="./utils/message.js"></script>

    <script>
      $(document).ready(function () {
        renderRoleSelect();
        bindEventListener();
      });

      function renderRoleSelect() {
        const selectIds = ["#role"];
        selectIds.forEach((selectId) => {
          listRole().then((response) => {
            if (response.code === 200) {
              let roles = response.data;

              $("<option></option>")
                .attr("name", "roleId")
                .attr("value", "")
                .text("Select Role")
                .prop("hidden", true)
                .prop("selected", false)
                .appendTo(selectId);

              $.each(roles, function (index, role) {
                $("<option></option>")
                  .attr("name", "roleId")
                  .attr("value", role.id)
                  .text(role.name)
                  .appendTo(selectId);
              });
            }
          });
        });
      }

      function bindEventListener() {
        const $registerForm = $("#register-form");
        const $message = $("#message");
        const $submitButton = $registerForm.find('button[type="submit"]');

        $registerForm.on("submit", function (e) {
          e.preventDefault();

          // 获取表单数据
          const firstname = $("#firstname").val();
          const roleId = $("#role").val();
          const lastname = $("#lastname").val();
          const age = $("#age").val();
          const username = $("#username").val();
          const password = $("#password").val();
          const confirmPassword = $("#confirmPassword").val();

          // 清除之前的消息
          $message.addClass("d-none");

          // 验证输入
          if (
            !roleId ||
            !firstname ||
            !lastname ||
            !age ||
            !password ||
            !confirmPassword
          ) {
            message.error("Please input all required fields!");
            return;
          }

          // 验证用户名格式
          if (!/^[a-zA-Z0-9_]{4,16}$/.test(username)) {
            message.error(
              "The username should consist of 4-16 letters, numbers, or underscores!"
            );
            return;
          }

          // 验证邮箱格式
          // if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
          //   showError('请输入有效的邮箱地址');
          //   return;
          // }

          // 验证密码强度
          if (password.length < 6) {
            message.error("Password length must be at least 6 characters!");
            return;
          }

          // if (!/\d/.test(password) || !/[a-zA-Z]/.test(password)) {
          //   showError('The password should contain letters and numbers!');
          //   return;
          // }

          // 验证两次密码是否一致
          if (password !== confirmPassword) {
            message.error("Entered passwords differ!");
            return;
          }

          // 准备发送的数据
          const registerData = {
            roleId,
            firstname,
            lastname,
            age,
            username,
            password,
          };

          // 显示加载状态
          const originalButtonText = $submitButton.html();
          $submitButton.prop("disabled", true);
          $submitButton.html(
            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Registering...'
          );

          // 发送注册请求
          register(registerData, {
            headers: {
              "Content-Type": "application/json",
            },
          }).then((response) => {
            if (response.code === 200) {
              // 显示成功消息
              $message
                .text("Registered successfully.")
                .removeClass("d-none alert-danger")
                .addClass("alert-success");

              // 重置表单
              $registerForm.trigger("reset");

              // 恢复按钮状态
              $submitButton.prop("disabled", false);
              $submitButton.html(originalButtonText);

              // 自动跳转到登录页面
              setTimeout(() => {
                window.location.href = "login.html";
              }, 2000);
            } else if (response.code === 400) {
              $submitButton.prop("disabled", false);
              $submitButton.html(originalButtonText);
              message.error(response.message);
            }
          });
        });
      }
    </script>
  </body>
</html>
